<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">

<title>我的知识体系</title>

<meta charset="UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link rel="stylesheet" href="websrc/plug-in/hDialog/css/animate.min.css" />
<!-- 动画效果 -->
<link rel="stylesheet" href="websrc/plug-in/hDialog/css/common.css" />
<!-- 页面基本样式 -->

<link rel="stylesheet"
	href="websrc/bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="websrc/plug-in/jsmind/css/jsmind.css" />
<link rel="stylesheet" href="websrc/css/common.css">
<script type="text/javascript" src="websrc/js/jquery-3.2.1.js"></script>
<script type="text/javascript"
	src="websrc/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style type="text/css">
#jsmind_container {
	width: 1200px;
	height: 550px;
	border: solid 1px #ccc;
	/*background:#f4f4f4;*/
	background: #f4f4f4;
	margin: 0 auto;
}
</style>

</head>

<body>
	<div class="header clearfix">
		<!--<div class="header-left clearfix">-->
		<!--<div class="logo">LOGO</div>-->
		<!--<div class="projectName">记忆宫殿</div>-->
		<!--<div class="projectEnglishName">Memory Palace</div>-->
		<!--</div>-->
		<!--<div class="header-middle">-->
		<!--个人首页/学习列表/浏览牌组/知识体系/我的商城-->
		<!--</div>-->
		<!--<div class="header-right">-->
		<!--wing-->
		<!--</div>-->
		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed"
						data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"
						aria-expanded="false">
						<span class="sr-only">Toggle navigation</span> <span
							class="icon-bar"></span> <span class="icon-bar"></span> <span
							class="icon-bar"></span>
					</button>
					<a class="navbar-brand header-left clearfix" href="#">
						<div class="logo">LOGO</div>
						<div class="projectName">记忆宫殿</div>
						<div class="projectEnglishName">Memory Palace</div>
					</a>
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse"
					id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="/memorypalace/index-login.html">个人首页<span class="sr-only">(current)</span></a></li>
						<li><a href="#">学习列表</a></li>
						<li><a href="mydeck.html">浏览牌组</a></li>
						<li class="active"><a href="#">知识体系</a></li>


					</ul>

					<ul class="nav navbar-nav navbar-right">
						<li><a href="#">Wing</a></li>
					</ul>
				</div>
				<!-- /.navbar-collapse -->
			</div>
			<!-- /.container-fluid -->
		</nav>
	</div>
	<!-- 下面是工具栏 -->
	<div class="toolbar clearfix">
		<div class="btn-group toolbar-right" role="group" aria-label="...">
			<button id="addKnowledgeHBoxBtn" type="button"
				class="btn btn-default zoomIn" onclick="clickaddKnowledge(this)">添加知识体系</button>
			<button id="editKnowledgeHBoxBtn" type="button"
				class="btn btn-default zoomIn" onclick="clickeditKnowledge(this)">编辑知识体系</button>
			<button type="button" class="btn btn-default"
				onclick="deleteKnowledge()">删除知识体系</button>
		</div>
	</div>
	<!-- 弹窗开始-->
	<div id="knowledgeHBox" style="display:none;">
		<form action="" method="post" onsubmit="return false;" style="padding:5px 20px">
			<!--标题-->
			<h2>添加知识体系</h2>
			<input id="knowledgeId" type="hidden">
			<!--属性-->
			<div class="row">
				<!--名称输入框-->
				<div class="col-lg-4">
					<div class="input-group">
						<span class="input-group-addon" id="sizing-addon2">名称</span> 
						<input id="knowledgeName" type="text" class="form-control" placeholder="知识体系名称" aria-describedby="sizing-addon2">
					</div>
				</div><!-- /.col-lg-4 -->
				<!--类型-->
				<div class="col-lg-4">
					<div class="input-group">
						<span class="input-group-addon" id="sizing-addon3">知识体系类型</span>
						<div class="input-group-btn" aria-describedby="sizing-addon3">
							<button id="knowledgeType" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								节点<span class="caret" style="margin-left:0.5em"></span>
							</button>
							<ul class="dropdown-menu" id="knowledgeTypeList">
								<li><a href="">节点</a></li>
								<li><a href="">母集</a></li>
								<li><a href="">序列</a></li>
								<li><a href="">有向图</a></li>
							</ul>
						</div><!-- /btn-group -->
					</div>
				</div><!-- /.col-lg-4 -->
				<!--父知识体系-->
				<div class="col-lg-4">
					<div class="input-group">
						<span class="input-group-addon" id="sizing-addon4">父知识体系</span>
						<div class="input-group-btn" aria-describedby="sizing-addon2">
							<button type="button" id="knowledgeFatherId" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								无<span class="caret" style="margin-left:0.5em"></span>
							</button>
							<ul class="dropdown-menu dropdown-menu-right" id="knowledgeFatherIdList"></ul> 
						</div><!-- /btn-group -->
					</div>
				</div><!-- /.col-lg-4 -->
			</div><!-- /.row -->
			<hr>
			<!--下面是卡片列表-->
			<!--按钮组-->
			<div class="row">
				<!--名称输入框-->
				<div class="col-lg-2">
					<!--标题-->
					<h3>选择卡片</h3>
				</div>
				<!-- 牌组选择 -->
				<div class="col-lg-4">
					<div class="input-group"
						style="margin-top: 10px;margin-bottom: 20px;">
						<span class="input-group-addon" id="sizing-addon5">牌组</span>
						<div class="input-group-btn" aria-describedby="sizing-addon2">
							<button type="button" class="btn btn-default dropdown-toggle"
								data-toggle="dropdown" aria-haspopup="true"
								aria-expanded="false">
								所有牌组<span class="caret" style="margin-left:0.5em"></span>
							</button>
							<ul class="dropdown-menu dropdown-menu-right"></ul>
						</div><!-- /btn-group -->
					</div>
				</div><!-- /.col-lg-2 -->
			</div><!-- /.row -->

			<table id="myaddtable" width="100%" class="mytable">
				<tr>
					<th>
						<button type="button" class="btn btn-default" aria-haspopup="true"
							aria-expanded="false">
							序号<span class="caret" style="margin-left:0.5em"></span>
						</button>
					</th>

					<!-- /btn-group -->
				</tr>
			</table>
			<div class="row myline">
				<div class="col-lg-8"></div>
				<!-- 确认按钮开始 -->
				<div class="col-lg-2">
					<button id="HCloseBtn" type="button"
						class="btn btn-default HCloseBtn" style="width: 100%"
						>
						确定
						<script>
							
						</script>
					</button>
				</div>
				<!-- 确认按钮结束 -->
				<div class="col-lg-2">
					<button type="button" class="btn btn-danger HCloseBtn"
						style="width: 100%">结束</button>
				</div>
			</div>
		</form>
	</div>
	<!--添加弹窗结束-->
	<script src="websrc/plug-in/hDialog/js/jquery-1.9.1.min.js"></script>
	<script src="websrc/plug-in/hDialog/js/jquery.hDialog.min.js"></script>
	<script>
		$(function() {
			// 添加按钮的绑定
			$("#addKnowledgeHBoxBtn").show();
			$("#addKnowledgeHBoxBtn").hDialog({
				box : '#knowledgeHBox',
				closeHide : false,
				width : 800,
				height : 500,
			}); 
			$("#addKnowledgeHBoxBtn").off();
			$("#addKnowledgeHBoxBtn").on('click', $("#editKnowledgeHBoxBtn"), clickaddKnowledge);
			
			// 编辑按钮的绑定
			$("#editKnowledgeHBoxBtn").show();
			$("#editKnowledgeHBoxBtn").hDialog({
				box : '#knowledgeHBox',
				closeHide : false,
				width : 800,
				height : 500,
			}); 
			$("#editKnowledgeHBoxBtn").off();
			$("#editKnowledgeHBoxBtn").on('click', $("#editKnowledgeHBoxBtn"), clickaddKnowledge);
			/* $("#editKnowledgeHBoxBtn").show();
			$("#editKnowledgeHBoxBtn").hDialog({
				box : '#editKnowledgeHBox',
				closeHide : false,
				width : 800,
				height : 500,
				beforeShow : function() {
					$.getJSON(
						"/memorypalace/knowledge/toaddknowledgetree.action?userId=''",
						parseDNNCCJSON
					);
				},
				afterHide : function() {
					$("#editKnowledgeHBoxBtn").off();
					$("#editKnowledgeHBoxBtn").on('click', $("#editKnowledgeHBoxBtn"), beforeeditKnowledge)
				}
			});
			$("#editKnowledgeHBoxBtn").off();
			$("#editKnowledgeHBoxBtn").on('click', $("#editKnowledgeHBoxBtn"), beforeeditKnowledge); */
			//页面加载完成后自动执行
			//$('#autoShow').hDialog({title:'页面加载完成后自动执行',autoShow: true});
			//带标题的
			//$('.demo0').hDialog({title: '测试弹框标题',height: 300});
	
		//返回顶部
		//$.goTop();
		});
	</script>

	<!-- 下面是思维导图容器 -->
	<div id="jsmind_container"></div>
	<script type="text/javascript" src="websrc/plug-in/jsmind/js/jsmind.js"></script>
	<script type="text/javascript"
		src="websrc/plug-in/jsmind/js/jsmind.draggable.js"></script>
	<script type="text/javascript">
	
		var jm;
		var showMind = function() {
			var mind = {
				"meta" : {
					"name" : "jsMind-demo-tree",
					"author" : "hizzgdev@163.com",
					"version" : "0.2"
				},
				/* 数据格式声明 */
				"format" : "node_array",
				/* 数据内容 */
				"data" : [
					{
						"id" : "root",
						"topic" : "我的知识体系",
						"isroot" : true
					}
				]
			};
			var options = {
				container : 'jsmind_container',
				editable : false,
				theme : 'primary'
			}
			jm = jsMind.show(options, mind);
		}
		showMind();
		$(function() {
			getJsMindData();
		})
	</script>
	<script type="text/javascript" src="websrc/js/knowledge.js"></script>
	<script type="text/javascript" src="websrc/js/common.js"></script>
	<!-- <button onclick="getData()">更新数据</button> -->
</body>
</html>
